```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从需求到上线：一条船的开发之旅</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #3B82F6;
            --secondary: #10B981;
            --accent: #F59E0B;
            --dark: #1F2937;
            --light: #F9FAFB;
        }
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #FAFAFA;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(16,185,129,0.9) 100%);
        }
        .section-divider {
            height: 120px;
            background: linear-gradient(to bottom, var(--light) 0%, rgba(255,255,255,0) 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            background-color: var(--primary);
        }
        .mermaid {
            display: flex;
            justify-content: center;
            background: white;
            border-radius: 0.5rem;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 0.2em;
            left: 0;
            width: 100%;
            height: 0.4em;
            background-color: rgba(245, 158, 11, 0.4);
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        .highlight-text:hover::after {
            transform: scaleX(1);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        <span class="highlight-text">从需求到上线</span><br>
                        一条船的开发之旅
                    </h1>
                    <p class="text-xl opacity-90 mb-8">当客户说"我只要一条能过河的船"时，背后发生了什么？</p>
                    <a href="#process" class="bg-white text-primary px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all inline-flex items-center">
                        探索全过程 <i class="fas fa-arrow-down ml-2"></i>
                    </a>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650199937342-4d4c36d7-4fb4-46bd-a5d9-93a36a76f5e2.png" alt="客户需求" class="rounded-lg shadow-xl w-full max-w-md transform rotate-2">
                        <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg w-1/3 transform -rotate-2">
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650197888686-c183bcbf-69b0-401e-ab3f-9e5c0c9eee69.png" alt="简单需求" class="w-full">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Overview -->
    <section id="process" class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">开发过程全景图</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">从简单需求到复杂实现，了解一个产品如何从概念走向市场</p>
            </div>
            
            <div class="mermaid">
                graph TD
                    A[客户需求<br>一条能过河的船] --> B[产品方案]
                    B --> C[架构设计]
                    C --> D[项目分解]
                    D --> E[需求评估]
                    E --> F[开发实现]
                    F --> G[测试验证]
                    G --> H[上线运维]
                    H --> I[市场推广]
            </div>
        </div>
    </section>

    <!-- Process Timeline -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="grid md:grid-cols-9 gap-4">
                <!-- Timeline Column -->
                <div class="md:col-span-2">
                    <div class="sticky top-10">
                        <h2 class="text-2xl font-bold text-dark mb-8">开发阶段</h2>
                        <div class="space-y-1">
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="1">客户需求</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="2">产品方案</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="3">架构设计</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="4">项目分解</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="5">需求评估</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="6">开发实现</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="7">测试验证</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="8">上线运维</button>
                            <button class="process-step text-left w-full px-4 py-2 rounded-lg font-medium" data-step="9">市场推广</button>
                        </div>
                    </div>
                </div>
                
                <!-- Content Column -->
                <div class="md:col-span-7">
                    <!-- Step 1 -->
                    <div class="process-content" id="step-1">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">1</div>
                                    <h3 class="text-2xl font-bold text-dark">客户提出需求</h3>
                                </div>
                                <p class="text-gray-700 mb-6">客户最初的请求非常简单明了："我要一条船，能过河就好。"看似简单的需求背后，却隐藏着复杂的实现过程。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650197888686-c183bcbf-69b0-401e-ab3f-9e5c0c9eee69.png" alt="简单需求" class="w-full rounded mb-4">
                                        <p class="text-gray-600">客户想象中的简单船只</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650197931640-5bda8904-e235-48f1-9d3b-fbfc5c6730c1.png" alt="实际需求" class="w-full rounded mb-4">
                                        <p class="text-gray-600">实际需要考虑的复杂因素</p>
                                    </div>
                                </div>
                                
                                <div class="bg-blue-50 border-l-4 border-primary p-4 mb-6">
                                    <p class="text-gray-700"><i class="fas fa-lightbulb text-primary mr-2"></i> 关键洞察：客户最初的需求往往只表达了表面的"解决方案"（船），而非真正的"问题"（过河）。专业团队需要挖掘背后的真实需求。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="process-content" id="step-2">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">2</div>
                                    <h3 class="text-2xl font-bold text-dark">产品经理提供方案</h3>
                                </div>
                                <p class="text-gray-700 mb-6">产品经理将客户的简单需求转化为具体的解决方案，考虑更多实际因素和用户体验。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198033622-a50e7ddb-b582-47c8-9d58-546c2a5af1c7.png" alt="产品方案1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">初步设计方案</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198072971-2c26d622-dbb3-4f67-9263-3592e8d7703b.png" alt="产品方案2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">改进后的方案</p>
                                    </div>
                                </div>
                                
                                <div class="bg-yellow-50 border-l-4 border-accent p-4">
                                    <p class="text-gray-700"><i class="fas fa-exclamation-triangle text-accent mr-2"></i> 产品思考：方案不仅需要考虑功能实现，还需要考虑美观性、易用性、安全性等多方面因素，这正是专业产品的价值所在。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="process-content" id="step-3">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">3</div>
                                    <h3 class="text-2xl font-bold text-dark">架构师提供规划蓝图</h3>
                                </div>
                                <p class="text-gray-700 mb-6">架构师将产品方案转化为技术实现蓝图，考虑系统的可扩展性、稳定性和性能。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198360866-aabca860-50bf-474a-9b35-88563fa9cb84.png" alt="架构设计1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">系统架构图</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198394874-7218cd64-d22a-4f09-9b21-1b6b92f69b66.png" alt="架构设计2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">技术组件分解</p>
                                    </div>
                                </div>
                                
                                <div class="bg-purple-50 border-l-4 border-purple-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-project-diagram text-purple-500 mr-2"></i> 技术考量：好的架构设计像船的龙骨，决定了产品能否长期稳定运行并适应未来发展需求。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 4 -->
                    <div class="process-content" id="step-4">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">4</div>
                                    <h3 class="text-2xl font-bold text-dark">研发经理进行项目分解</h3>
                                </div>
                                <p class="text-gray-700 mb-6">将大型项目分解为可管理的小任务，明确时间节点和责任人，确保项目有序推进。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650199334939-be85bfd9-90fe-48f6-9f65-8c7148529b20.png" alt="项目分解1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">任务分解结构</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198559231-928b7413-d9b5-4969-ad1d-863d3e970232.png" alt="项目分解2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">甘特图规划</p>
                                    </div>
                                </div>
                                
                                <div class="bg-green-50 border-l-4 border-secondary p-4">
                                    <p class="text-gray-700"><i class="fas fa-tasks text-secondary mr-2"></i> 项目管理：合理的任务分解是项目成功的基石，就像造船需要按部就班地完成各个部件一样。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 5 -->
                    <div class="process-content" id="step-5">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">5</div>
                                    <h3 class="text-2xl font-bold text-dark">需求评估与调整</h3>
                                </div>
                                <p class="text-gray-700 mb-6">初步评估项目需要1年时间，但市场不等人，客户要求1个月内上线核心功能。</p>
                                
                                <div class="grid md:grid-cols-1 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650198696650-981eeab4-cd76-4b05-a76e-8e847dc6bf6c.png" alt="需求评估" class="w-full rounded mb-4">
                                        <p class="text-gray-600">时间与功能的平衡</p>
                                    </div>
                                </div>
                                
                                <div class="bg-red-50 border-l-4 border-red-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-balance-scale text-red-500 mr-2"></i> 现实考量：商业决策需要在完美与实用之间找到平衡点，MVP（最小可行产品）策略成为关键。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 6 -->
                    <div class="process-content" id="step-6">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">6</div>
                                    <h3 class="text-2xl font-bold text-dark">开发团队实现方案</h3>
                                </div>
                                <p class="text-gray-700 mb-6">基于新时间要求重新设计并快速开发，团队寻找现有案例借鉴，提高开发效率。</p>
                                
                                <div class="grid md:grid-cols-3 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650199640913-880d7b98-a975-47d5-a434-98b4d49982de.png" alt="开发案例1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">参考案例</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650206677386-55524cc1-75b8-49a5-b1a7-ba0db249bfd7.png" alt="开发案例2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">快速原型</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650199828444-82aa87de-6194-431d-8739-f1875c6d5499.png" alt="开发案例3" class="w-full rounded mb-4">
                                        <p class="text-gray-600">最终实现</p>
                                    </div>
                                </div>
                                
                                <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-code text-blue-500 mr-2"></i> 开发哲学：在时间压力下，合理利用现有资源和经验，聚焦核心功能，实现快速交付。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 7 -->
                    <div class="process-content" id="step-7">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">7</div>
                                    <h3 class="text-2xl font-bold text-dark">项目测试与验证</h3>
                                </div>
                                <p class="text-gray-700 mb-6">确保产品在各种条件下的可靠性和安全性，避免上线后出现问题。</p>
                                
                                <div class="grid md:grid-cols-3 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650206692103-b67c6bdd-f5da-41f1-adc8-9d1818e38917.png" alt="测试1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">功能测试</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650206735587-7ca389ca-1174-4809-bd41-3d6b467f508d.png" alt="测试2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">压力测试</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650206923390-a763a332-ac63-4d85-a721-a28a75c00e1b.png" alt="测试3" class="w-full rounded mb-4">
                                        <p class="text-gray-600">用户体验测试</p>
                                    </div>
                                </div>
                                
                                <div class="bg-pink-50 border-l-4 border-pink-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-bug text-pink-500 mr-2"></i> 质量保障：没有经过充分测试的产品就像未经检验的船只，可能在关键时刻出现问题。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 8 -->
                    <div class="process-content" id="step-8">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">8</div>
                                    <h3 class="text-2xl font-bold text-dark">项目上线与运维</h3>
                                </div>
                                <p class="text-gray-700 mb-6">产品上线不是终点，而是新阶段的开始，需要持续的运维支持确保稳定运行。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650207202404-493f6111-403b-4e57-aba1-6e458c4585d1.png" alt="上线1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">上线部署</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650207265274-d25e8ed6-6c3f-4551-b8b7-6e992cdc05b7.png" alt="上线2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">运维支持</p>
                                    </div>
                                </div>
                                
                                <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-server text-indigo-500 mr-2"></i> 持续运营：产品上线就像船下水，需要持续的"维护"和"燃料"才能长久运行。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 9 -->
                    <div class="process-content" id="step-9">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                            <div class="p-8">
                                <div class="flex items-center mb-6">
                                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white text-xl font-bold mr-4">9</div>
                                    <h3 class="text-2xl font-bold text-dark">市场宣传与成功案例</h3>
                                </div>
                                <p class="text-gray-700 mb-6">将项目成果转化为市场资产，树立品牌形象，吸引更多潜在客户。</p>
                                
                                <div class="grid md:grid-cols-2 gap-6 mb-8">
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650207421748-57af4576-5066-4ce3-92af-d2b3f45d7b6b.png" alt="宣传1" class="w-full rounded mb-4">
                                        <p class="text-gray-600">宣传材料</p>
                                    </div>
                                    <div class="card-hover bg-gray-50 p-6 rounded-lg">
                                        <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1650207435621-3bdb02ea-a747-458e-aba3-f031642bffed.png" alt="宣传2" class="w-full rounded mb-4">
                                        <p class="text-gray-600">成功案例展示</p>
                                    </div>
                                </div>
                                
                                <div class="bg-teal-50 border-l-4 border-teal-500 p-4">
                                    <p class="text-gray-700"><i class="fas fa-bullhorn text-teal-500 mr-2"></i> 市场价值：优秀的产品需要有效的宣传才能被更多人了解和使用，实现其商业价值。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Takeaways -->
    <section class="py-16 bg-dark text-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">核心启示</h2>
                <p class="text-lg text-gray-300 max-w-2xl mx-auto">从"一条能过河的船"看产品开发的本质</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-800 p-8 rounded-xl card-hover">
                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-lightbulb text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">需求本质</h3>
                    <p class="text-gray-300">客户表达的是解决方案而非真实问题。挖掘"为什么要过河"比"如何造船"更重要。</p>
                </div>
                
                <div class="bg-gray-800 p-8 rounded-xl card-hover">
                    <div class="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-balance-scale text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">平衡艺术</h3>
                    <p class="text-gray-300">在完美与实用之间找到平衡点，MVP策略允许快速验证核心价值。</p>
                </div>
                
                <div class="bg-gray-800 p-8 rounded-xl card-hover">
                    <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">团队协作</h3>
                    <p class="text-gray-300">从产品到开发再到市场，跨职能协作是项目成功的关键。</p>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scrolling for process steps
        document.querySelectorAll('.process-step').forEach(button => {
            button.addEventListener('click', function() {
                const step = this.getAttribute('data-step');
                document.getElementById(`step-${step}`).scrollIntoView({
                    behavior: 'smooth'
                });
                
                // Update active state
                document.querySelectorAll('.process-step').forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('text-gray-700', 'hover:bg-gray-100');
                });
                this.classList.remove('text-gray-700', 'hover:bg-gray-100');
                this.classList.add('bg-primary', 'text-white');
            });
        });
        
        // Set first step as active by default
        document.querySelector('.process-step[data-step="1"]').classList.add('bg-primary', 'text-white');
        
        // Intersection Observer for step highlighting
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const id = entry.target.id.split('-')[1];
                    document.querySelectorAll('.process-step').forEach(btn => {
                        btn.classList.remove('bg-primary', 'text-white');
                        btn.classList.add('text-gray-700', 'hover:bg-gray-100');
                    });
                    document.querySelector(`.process-step[data-step="${id}"]`).classList.remove('text-gray-700', 'hover:bg-gray-100');
                    document.querySelector(`.process-step[data-step="${id}"]`).classList.add('bg-primary', 'text-white');
                }
            });
        }, { threshold: 0.5 });
        
        document.querySelectorAll('.process-content').forEach(section => {
            observer.observe(section);
        });
    </script>
</body>
</html>
```